<template>
	<scroll-view>
	<view class="container">
		<!--  -->
		
		<view class="fix-title">
			<!-- 说明 -->
			<view>
				<text>邀请好友加入找零工平台，即可获得1个诚信值</text>
			</view>
			<!-- 我的好友信息类目 -->
			<view>
				<text>姓名</text>
				<text>注册时间</text>
			</view>
		</view>
		<!-- 我的好友列表 -->
		<view class="list">
			<view class="single-friend" v-for="(item, index) in friendsList" :key="item.userId">
				<view>
					<image :src="item.pic" mode="aspectFill"></image>
					<text>{{ item.userName }}</text>
				</view>
				<view>{{ item.createTime.slice(0, 11) }}</view>
			</view>
			<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"> </uni-load-more>
		</view>
		<!-- 分享按钮 -->
		<view class="bottom">
			<view @click="handleShare('WXSceneSession')">
				<image src="/static/icon1/05.png" mode="aspectFill"></image>
				<text>微信</text>
			</view>
			<view @click="handleShare('WXSenceTimeline')">
				<image src="/static/icon1/06.png" mode="aspectFill"></image>
				<text>朋友圈</text>
			</view>
			<view @click="handleOpenPost">二维码分享</view>
		</view>
		<!-- 分享海报 -->
		<view class="modal" :class="isShowPost ? 'show' : ''">
			<!-- 海报图 -->
			<canvas canvas-id="invitation-post"
				:style="{ width: '305px', height: '403px', position: 'fixed', top: '-9999px', left: '35px'}"></canvas>
			<view class="my-post" @longpress="handleSaveAlbum">
				<image class="bg" :src="postUrl" mode="aspectFill"></image>
			</view>
			<image @click="handleClosePost" class="close" src="/static/icon1/07.png"></image>
		</view>
	</view>
    </scroll-view>
</template>
<script>
	import {
		baseURL
	} from '@/config'
	export default {
		data() {
			return {
				hasFlag: true, // 是否还有更多数据要加载
				imgPath: '', //图片路径
				friendsNum: '', //好友数量
				friendsList: [], //我的好友即下级列表
				isShowPost: false, //是否显示海报
				postUrl: '', //海报URL 
				obj: {},
				requestObj: {
					pageNum: 0,
					pageSize: 10000,
				},
			}
		},
		methods: {
			// 保存至相册
			handleSaveAlbum() {
				uni.saveImageToPhotosAlbum({
					filePath: this.postUrl,
					success: (res) => {
						uni.showToast({
							title: '海报已存至相册'
						})
						this.isShowPost = false
					}
				})
			},
			// 获取我的下级 好友
			async my_sub() {
				if (!this.hasFlag) return // 说明已经没有更多啦
					++this.requestObj.pageNum
				let res = await this.$fetch(this.$api.my_sub, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				console.log(res)
				// 整理数据
				res.rows.forEach(item => {
					item.avatar = item.avatar ? item.avatar : ''
					item.pic = this.imgPath + item.avatar
				})
				// 拼接
				this.friendsList = [...this.friendsList, ...res.rows]
				this.hasFlag = this.friendsList.length < res.total
				// 改标题
				this.friendsNum = res.total
				this.changTitle()
			},
			//判断有几个好友
			changTitle() {
				if (this.friendsNum) {
					uni.setNavigationBarTitle({
						title: '邀请好友（' + this.friendsNum + '）'
					})
				}
			},
			// 获取二维码
			async get_user_qrcode() {
				let res = await this.$fetch(this.$api.get_user_qrcode, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.obj = res.data
				this.$nextTick(() => {
					this.createdPost(this.imgPath + res.data.avatar, res.data.userName, this.imgPath + res.data
						.path)
					console.log(11);
				})
			},
			//分享到
			handleShare(scene) {
				console.log(scene, this.postUrl)
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 2,
					imageUrl: this.postUrl, //网络图片，先上传七牛
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// 创建画布
			createdPost(avatar, userName, qrcode) {
				console.log('创建画布', avatar, userName, qrcode)
				const ctx = uni.createCanvasContext('invitation-post')
				//背景图片
				ctx.drawImage('https://images.linglinggong.net/static/icon1/08.png', 0, 0, 305, 403)
				//用户名
				ctx.setFillStyle('#402110')
				ctx.font = "bold 14px PingFangSC-Medium";
				ctx.fillText(userName, 160 / 2, 40 / 2 + 20)
				const metrics = ctx.measureText(userName)
				//说明
				ctx.setFillStyle('rgba(64,33,16,0.50)')
				ctx.font = "12px PingFangSC-Regular";
				ctx.fillText('扫码加入“找零工”，开启“滴滴招人”', 163 / 2, 90 / 2 + 17)
				//二维码
				ctx.drawImage(qrcode, 58 / 2, 210 / 2, 496 / 2, 496 / 2)
				//提示
				ctx.setFillStyle('#402110')
				ctx.font = "14px PingFangSC-Regular";
				ctx.fillText('长按二维码保存至相册', 166 / 2, 726 / 2 + 20)
				//任务头像
				ctx.arc(85 / 2, 85 / 2, 22.5, 0, 2 * Math.PI) // 画圆
				ctx.clip()
				ctx.drawImage(avatar, 40 / 2, 40 / 2, 45, 45)
				ctx.draw(true, () => {
					// console.log('画画')
					uni.canvasToTempFilePath({
						canvasId: 'invitation-post',
						success: (res) => {
							uni.hideLoading()
							this.postUrl = res.tempFilePath
						}
					})
				})
			},
			//打开海报
			handleOpenPost() {
				this.isShowPost = true
			},
			//关闭海报
			handleClosePost() {
				this.isShowPost = false
			}
		},
		onLoad() {
			this.imgPath = uni.getStorageSync('imgPath')
		},
		onShow() {
			this.my_sub()
			this.get_user_qrcode()
		},
	}
</script>
<style lang="less" scoped>
	
    page {
		// position: relative;
		width: 100%;
		// height: 100%;
		overflow-x: hidden;
		overflow-y: hidden;
		background-color: #F2F2F2;
	}
	.container {
		overflow: hidden;

		&>.fix-title {
			z-index: 1;
			width: 100vw;
			position: fixed;

			&>view:first-child {
				background-color: #f2f2f2;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 0;
			}

			&>view:nth-child(2) {
				height: 80rpx;
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				border-bottom: 2rpx solid #F2F2F2;

				text {
					flex: 1; //平均分
					color: #888888;
					text-align: center;
				}
			}
		}

		&>.list {
			margin: 170rpx 0 130rpx;

			&>.single-friend {
				background-color: #FFFFFF;
				display: flex;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 30rpx;
					width: 690rpx;
					height: 2rpx;
					background: #F2F2F2;
				}

				&>view {
					width: 375rpx;
					height: 100rpx;
					display: flex;
					align-items: center;

					image {
						margin: 0 30rpx 0 60rpx;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #C0C0C0;
					}

					text {
						color: #333540;
					}
				}

				&>view:last-child {
					justify-content: center;
					text-align: center;
					color: #222222;
				}
			}
		}

		&>.bottom {
			z-index: 1;
			position: fixed;
			bottom: 0;
			width: 100vw;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;

			&>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&>image {
					width: 42rpx;
					height: 42rpx;
				}

				&>text {
					font-size: 12px;
				}
			}

			&>view:first-child {
				margin-left: 46rpx;
			}

			&>view:nth-child(2) {
				margin: 0 56rpx 0 76rpx;
			}

			&>view:last-child {
				flex: 1;
				height: 100rpx;
				background-color: #FCC928;

				&:active {
					opacity: 0.7;
				}
			}
		}

		&>.modal {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1110;
			opacity: 0;
			outline: 0;
			text-align: center;
			-ms-transform: scale(1.185);
			transform: scale(1.185);
			backface-visibility: hidden;
			perspective: 2000upx;
			background: rgba(0, 0, 0, 0.4);
			transition: all 0.3s ease-in-out 0s;
			pointer-events: none;

			&.show {
				opacity: 1;
				transition-duration: 0.3s;
				-ms-transform: scale(1);
				transform: scale(1);
				overflow-x: hidden;
				overflow-y: auto;
				pointer-events: auto;
			}

			.my-post {
				// border: 1px solid  #4CD964;
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 610rpx;
				height: 806rpx;

				.bg {
					width: 610rpx;
					height: 806rpx;
				}
			}

			.close {
				position: fixed;
				width: 70rpx;
				height: 70rpx;
				left: 50%;
				margin-left: -35rpx;
				bottom: 90rpx;
			}
		}
	}
</style>
